<template>
	<view class="app">
		<view class="tab_head flex justify-start items-center">
			<view :class="tab==0?'tab active':'tab'" @click="tab=0;">通话查询</view>
			<view :class="tab==1?'tab active':'tab'" @click="loadlist">通话记录</view>
		</view>
		<view class="tab_content" v-if="tab==0">
			<view class="panel">
				<view class="flex-col setpidpage">
					<view class="flex justify-between inputitem">
						<view>订单号</view>
						<view><input v-model="order_sn" placeholder="请输入订单号" /></view>
					</view>
					<view class="flex justify-center items-center btn-save">
						<button @tap.stop="query">查询</button>
					</view>
				</view>
			</view>
			
			<view class="panel" v-for="(item,index) in record">
				<view class="flex justify-between items-center voiceitem">
					<view class="flex-col">
						<view>
							{{item.usermobile==item.tonum?'技师 -> 客户':'客户 -> 技师'}} 
						</view>
						<view class="times">{{item.starttime*1000|formatDate}}</view>
					</view>
					<view @click="play" :data-id="item.id" :data-url="item.voiceurl">
						<view>{{item.endtime-item.starttime}}秒</view>
						<view class="playbtn">播放</view>
					</view>
				</view>
			</view>
			
			
			<view class="playctr">
				<view class="justify-between flex items-center playctr-item">
					<view>{{playtime}}</view>
					<view v-if="isplay" @click="stop">停止</view>
				</view>
			</view>
		</view>
		<view class="tab_content" v-if="tab==1">
			<view class="panel">
					
					<view class="table">
						<view class="row header">
							<view class="cell">时间</view>
							<view class="cell">商家</view>
							<view class="cell">金额</view>
							<view class="cell">状态</view>
							<view class="cell">通话</view>
						</view>
						<view class="nodata" v-if="calllist.total<1">无数据</view>
						
						<view class="row body" v-for="(item,index) in calllist.data" @click="loadvoice(item.order_sn)">
							<view class="cell times">{{item.create_time*1000|formatDate}}</view>
							<view class="cell">{{item.name}}</view>
							<view class="cell">{{item.pay_money}}</view>
							<view class="cell">{{item.order_status|orderStatusTxt}}</view>
							<view class="cell">{{item.voicenum}}</view>
						</view>
					</view>	
					<view class="page playctr">
						<view class="page-item">
							<wyb-pagination :total-items="calllist.total" :page-items="calllist.per_page" :current="calllist.current_page" :show-total-item="true" :show-icon="true" @change="loadlist"/>
						</view>
					</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {
		data() {
			return {
				order_sn:'',
				record:[],
				player:null,
				isplay:false,
				voiceid:0,
				playtime:'00:00',
				tab:0,
				calllist:{}
			}
		},
		onLoad() {
			that=this;
		},
		methods: {
			loadvoice(order_sn){
				this.order_sn=order_sn;
				this.tab=0;
				this.query();
			},
			query(){
				that.record=[];
				this.comm.http('/api/tool/callrecord',{order_sn:this.order_sn}).then(res=>{
					if(res.code==0){
						uni.showToast({icon:'none',title:res.msg});
						return;
					}else{
						that.record=res.data;
					}
				});
			},
			loadlist(page={current:1}){
				this.tab=1;
				let _page=page.current;
				Comm.http('/api/tool/calllist',{page:_page},'POST').then(res=>{
					if(res.code==1)
						that.calllist=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			play(e){
				console.log(e)
				this.isplay=false;
				this.voiceid=e.currentTarget.dataset.id;

				if(this.player){
					this.player.src=e.currentTarget.dataset.url;
					this.isplay=true;
					this.player.play();
				}else{
					this.player=uni.createInnerAudioContext();
					this.player.src=e.currentTarget.dataset.url;
					this.player.onCanplay(res=>{
						this.isplay=true;
						this.player.play();
					});
				}

				this.player.onTimeUpdate(res=>{
					this.playtime=this.timeFormat(this.player.currentTime) + '/' + this.timeFormat(this.player.duration);
				});
				
				this.player.onEnded(res=>{
					this.playtime='00:00';
					this.isplay=false;
				});
				
				this.player.onError(res=>{
					this.isplay=false;
					this.playtime='00:00';
					uni.showToast({icon:'none',title:'播放失败'});
				});
			},
			stop(){
				this.isplay=false;
				this.player=this.player?this.player:uni.createInnerAudioContext();
				this.playtime='00:00';
				this.player.stop();
			},
			timeFormat:function(t){
				let min = parseInt(t/60);
				min = min < 10?'0'+min:min;
				let sec = parseInt(t%60);
				sec = sec < 10?'0'+sec:sec;
				return `${min}:${sec}`;
			}
		}
	}
</script>

<style lang="scss">
	.setpidpage{
		.inputitem{
			align-items: center;
			view:nth-child(2){
				flex: 1;margin-left: 8px;
				input{
					height:40px; width: 100%; border-bottom: 1px solid #f0f0f0; font-size: 13px;
				
				}
			}
	
		}
		.tips{
			font-size: 12px; color: #999; padding: 8px 0; display: block;
		}
	}
	.voiceitem{
		padding: 8px 0;
	}
	.times{
		color: #666;
		margin-top: 8px;
		font-size: 12px;
	}
	.playbtn{
		margin-top: 8px;
	}
	.playctr{
		position: fixed; left: 0; bottom: 0; width: 100vw; border-top:#e6e6e6 1px solid; background-color: #fff;  padding: 8px 0;
	}
	.playctr-item{
		margin: 8px 8px;
	}
	.tab_head{
		padding-bottom: 8px;
		
		.active{
			border-bottom: 2px solid #ff5500;
		}
		.tab{
			margin-left: 16px; padding: 8px 0;
		}
	}
	.tab_content{
		padding-bottom: 50px;
	}
</style>
